﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/ezdesk_app_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="pageTitle" -->
    <title>易得桌面</title>
    <!-- InstanceEndEditable -->
<link href="Content/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
<link href="Content/ui.textbox.css" type="text/css" rel="stylesheet"  media="all" />
<link href="Content/freecontent.css" rel="stylesheet" type="text/css" />
<link href="Content/wdatepicker.css" rel="stylesheet" type="text/css" />
<link href="Content/ajaxbusy.css" rel="stylesheet" type="text/css" />
<link href="Content/Site.css" rel="stylesheet" type="text/css" />

<script src="Scripts/ezdesk_mockdata.js" type="text/javascript"></script>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.custom.min.js" type="text/javascript"></script>   
<script src="Scripts/jquery.form.js" type="text/javascript"></script>
<script src="Scripts/ui.textbox.js" type="text/javascript"></script>
<script src="Scripts/pinyin.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk-jquery-ui.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk_common.js" type="text/javascript"></script>
</head>

<!-- InstanceBeginEditable name="pageStyles" -->
    <style type="text/css">
        .entryExplanation
        {
            font-weight: bolder;
            font-size: 14px;
            background-color: #FFEC8B;
        }
    </style>
    <!-- InstanceEndEditable -->
    
<!-- InstanceBeginEditable name="pageScripts" -->
<script type="text/javascript">
    //************* URL常量
    var URL_UPDATE_SINGLE_UER_ANNUAL_LEAVE = "";
    var URL_UPDATE_VULUME_UER_ANNUAL_LEAVE = "";

    //************* 全局变量
    var g_Var = {
        'userInfoList': null
    };


    //************* 常量定义
    var StaticResource = {
        "chooseTag": "你选择了："
    };


    var convertor = {
        "选择": function (item) {
            var chooseDom = '<input id="annualLeaveChecked_{userId}" type="checkbox"/>';
            chooseDom = chooseDom.replace("{userId}", item.Id);
            return chooseDom;
        },

        "姓名": function (item) {
            return item.Name;
        },

        "部门": function (item) {
            return item.Dept.DeptName;
        },
        "更改": function (item) {
            var annualLeaveDom = '<input id="annualLeaveTime_{userId}"  class="txtAnnualLeaveTime"style="width:60px;" value="{annualLeave}"/><span> 天</span>';
            annualLeaveDom = annualLeaveDom.replace("{userId}", item.Id)
                                           .replace("{annualLeave}", item.AnnualLeave)
            return annualLeaveDom;
        },
        "提交": function (item) {
            var submitDom = '<a onclick="annualLeaveSubmit(\'{userId}\')">确定</a>';
            submitDom = submitDom.replace("{userId}", item.Id);
            //submitDom = submitDom.replace("{userId}", item.Id);

            return submitDom;
        }
    };




    //************* Accessor访问器
    var EzAccessor = {};
    function CreateAccessor() {
        if (ezmock.IS_MOCKED) {
            EzAccessor = CreateMockEzAccessor();

        } else {
            EzAccessor = CreateRealEzAccessor();
        }
    }


    function CreateMockEzAccessor() {
        //模拟实现服务器交互方法
        var mock_userInfoList = [
        {
            "Id": "8",
            "Name": "杨裕欣", "UserName": "yuxin",
            "Dept": {
                "Id": "111",
                "DeptName": "软件工程",
                "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
            },
            "AnnualLeave": "5"
        },
           {
               "Id": "7",
               "Name": "裕欣", "UserName": "yuxin",
               "Dept": {
                   "Id": "333",
                   "DeptName": "设计",
                   "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
               },
               "AnnualLeave": "5"
           }, {
               "Id": "6",
               "Name": "杨裕", "UserName": "yuxin",
               "Dept": {
                   "Id": "222",
                   "DeptName": "策划",
                   "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
               },
               "AnnualLeave": "5"
           }, {
               "Id": "5",
               "Name": "杨欣", "UserName": "yuxin",
               "Dept": {
                   "Id": "222",
                   "DeptName": "策划",
                   "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
               },
               "AnnualLeave": "5"
           },
           {
               "Id": "4",
               "Name": "杨欣", "UserName": "yuxin",
               "Dept": {
                   "Id": "333",
                   "DeptName": "设计",
                   "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
               },
               "AnnualLeave": "5"
           },
           {
               "Id": "3",
               "Name": "杨欣", "UserName": "yuxin",
               "Dept": {
                   "Id": "111",
                   "DeptName": "软件工程",
                   "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
               },
               "AnnualLeave": "5"
           },
           {
               "Id": "2",
               "Name": "杨欣", "UserName": "yuxin",
               "Dept": {
                   "Id": "333",
                   "DeptName": "设计",
                   "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
               },
               "AnnualLeave": "5"
           }, {
               "Id": "1",
               "Name": "杨欣", "UserName": "yuxin",
               "Dept": {
                   "Id": "222",
                   "DeptName": "策划",
                   "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
               },
               "AnnualLeave": "5"
           }
           ];

        var mock_deptList = [

            {
                'Id': '111',
                'DeptName': '软件工程'

            },

            {
                'Id': '222',
                'DeptName': '策划'
            },

            {
                'Id': '333',
                'DeptName': '设计'
            }

        ];

        var mockEzAccessor = {
            'getUserInfoList': function () {
                return mock_userInfoList;

            },
            "getDeptList": function () {
                return mock_deptList;
            },
            'updateOneAnnualLeave': function (userId, annualLeaveTime) {
                alert("用户" + userId + "年假被修改为：" + annualLeaveTime + "天");

                updateAnnualLeaveList(userId, annualLeaveTime);

                updateAnnualLeaveIntDataStore(userId, annualLeaveTime);

                var stateInfo = { "State": "Success", "Info": "更改成功！", "Data": null };
                $.displayStateInfo(stateInfo);

            },

            'updateVolumeAnnualLeave': function (userIdList, annualLeaveTime) {
                alert(userIdList + "年假被修改为" + annualLeaveTime + "天");

                updateAnnualLeaveList(userIdList, annualLeaveTime);

                updateAnnualLeaveIntDataStore(userIdList, annualLeaveTime);

                var stateInfo = { "State": "Success", "Info": "更改成功！", "Data": null };
                $.displayStateInfo(stateInfo);

            }

        };

        return mockEzAccessor;
    }

    function CreateRealEzAccessor() {
        //实现服务器交互方法
        var realEzAccessor = {
            'getUserInfoList': function () {


            },

            'updateOneAnnualLeave': function (userId) {
                var annualLeaveTime = $('#annualLeaveTime_' + userId).val();

                $(this).ajaxBusy('begin');
                $.post(URL_UPDATE_SINGLE_UER_ANNUAL_LEAVE, {
                    "userId": userId,
                    "annualLeaveTime": annualLeaveTime
                }, function (e) {
                    updateAnnualLeaveList(userId, annualLeaveTime);

                    updateAnnualLeaveIntDataStore(userId, annualLeaveTime);

                    $.displayStateInfo(e);
                    $(this).ajaxBusy('end');
                });
            },

            'updateVolumeAnnualLeave': function (userIdList) {
                var annualLeaveTime = $('#volumeSetTime').val();

                $(this).ajaxBusy('begin');
                $.post(URL_UPDATE_VULUME_UER_ANNUAL_LEAVE, {
                    "userIdList": userIdList,
                    "annualLeaveTime": annualLeaveTime
                }, function (e) {
                    updateAnnualLeaveList(userIdList, annualLeaveTime);

                    updateAnnualLeaveIntDataStore(userIdList, annualLeaveTime);

                    $.displayStateInfo(e);
                    $(this).ajaxBusy('end');
                });
            }


        };

        return realEzAccessor;
    }


    //更新列表
    function updateAnnualLeaveList(userIdList, annualLeaveTime) {
        userIdList.split(",");
        for (var key in userIdList) {
            $('#annualLeaveTime_' + userIdList[key]).val(annualLeaveTime);
        }

    }

    //更新缓存中的年假记录
    function updateAnnualLeaveIntDataStore(userIdList, annualLeaveTime) {
        userIdList.split(",");
        for (var key in userIdList) {
            for (var member in g_Var['userInfoList']) {
                if (userIdList[key] == g_Var['userInfoList'][member].Id) {
                    g_Var['userInfoList'][member].AnnualLeave = annualLeaveTime;

                }
            }
        }

    }


    function bindDeptList(deptList) {

        for (var key in deptList) {
            var deptName = deptList[key].DeptName;
            var deptId = deptList[key].Id;
            var deptNameDom = '<a class="indent" onclick="bindMembersThisDept(\'{deptId}\')">{deptName}</a><br/>';
            deptNameDom = deptNameDom.replace("{deptId}", deptId)
                                 .replace("{deptName}", deptName);

            $('#cmbDeptList').append(deptNameDom);
        }

    }

    function bindMembersThisDept(deptId) {
        var memberList = [];
        for (var key in g_Var.userInfoList) {
            if (g_Var.userInfoList[key].Dept.Id == deptId) {
                memberList.push(g_Var.userInfoList[key]);
            }
        }

        bindAnnualLeaveOptionList(memberList);

    }



    function bindAnnualLeaveOptionList(userInfoList) {

        var data = DataConverterForDataTable.convertData(userInfoList, convertor);

        data.bPaginate = false;
        data.bRetrieve = true;
        data.bFilter = false;
        data.bSort = false;
        data.bInfo = false;

        $('#divAnnualLeaveOpiton').empty();

        var tblAnnualLeaveOpitont = $('<table id="tblAnnualLeaveOpitont" class="tbl"/>')
               .appendTo('#divAnnualLeaveOpiton');

        $('#tblAnnualLeaveOpitont').dataTable(data);

        var checkBoxColumn = $('#tblAnnualLeaveOpitont thead tr th')[0];
        $(checkBoxColumn).css({
            'width': '50px'
        });

        var nameColumn = $('#tblAnnualLeaveOpitont thead tr th')[1];
        $(nameColumn).css({
            'width': '50px'
        });

        var deptColumn = $('#tblAnnualLeaveOpitont thead tr th')[2];
        $(deptColumn).css({
            'width': '80px'
        });

    }

    function annualLeaveSubmit(userId) {
        if ($('#annualLeaveTime_' + userId).val()) {
            var annualLeaveTime = $('#annualLeaveTime_' + userId).val();

            EzAccessor.updateOneAnnualLeave(userId, annualLeaveTime);
        }
        else {
            //todo:处理操作失误
            var stateInfo = { "State": "Error", "Info": "假期长度不能为空！", "Data": null };
            $.displayStateInfo(stateInfo);
        }

    }


    function findCheckedUserId() {
        var userIdList = [];
        for (var key in g_Var["userInfoList"]) {
            var userId = g_Var["userInfoList"][key].Id;

            if ($('#annualLeaveChecked_' + userId).attr('checked')) {
                userIdList[userIdList.length] = userId;
            }
        }
        return userIdList.join(',');

    }






    function initPage() {
        EzTipsManager.addTipBox('#tip_remind', 'tipRemind');
        EzTipsManager.showTipBox('tipRemind');

        $(this).ajaxBusy();
        CreateAccessor();

        g_Var["userInfoList"] = EzAccessor.getUserInfoList();
        bindAnnualLeaveOptionList(g_Var["userInfoList"]);

        var deptList = EzAccessor.getDeptList();
        bindDeptList(deptList);
    }




    function initPageEvent() {
        //批量修改提交
        $('#volumeSetSubmit').click(function () {
            if ($('#volumeSetTime').val()) {
                var userIdList = findCheckedUserId();
                if (userIdList.length > 0) {
                    var annualLeaveTime = $('#volumeSetTime').val();

                    EzAccessor.updateVolumeAnnualLeave(userIdList, annualLeaveTime);
                } else {
                    var stateInfo = { "State": "Error", "Info": "没有选择员工！", "Data": null };
                    $.displayStateInfo(stateInfo);
                }
            }
            else {
                var stateInfo = { "State": "Error", "Info": "假期长度不能为空！", "Data": null };
                $.displayStateInfo(stateInfo);
            }

        })

        //所有人
        $('#cmbEveryone').click(function () {
            bindAnnualLeaveOptionList(g_Var["userInfoList"]);
        });
    }



    $(function () {
        initPage();
        initPageEvent();
    });
</script>
<!-- InstanceEndEditable -->



<body>
<div id="root">
	<div id="headw">
    	<div id="head">
            <!-- InstanceBeginEditable name="pageHead" -->
			<p>
                早上好，杨裕欣(软件工程部)
		    </p>
            <div id="status-bar">
            <span><a href="#">设置</a></span>&nbsp;
            魏玛软件出品
            </div>
            <div id="tabs">
				<ul>
					<li><a class="current">第一栏</a></li>
					<li><a>第一栏</a></li>
					<li><a>第一栏</a></li>
				</ul>
			</div>
            <!-- InstanceEndEditable -->
        </div>
    </div>
    <div id="main">
    
    	<div id="contentw">
            <div id="content-page">
	            <!-- InstanceBeginEditable name="pageContent" -->
      
                <div id="page-head">
                    <span>批量设置年假时间</span>
                </div>
                <div id="page-body">
                    <div id="divAnnualLeaveOpiton">
                    </div>
                </div>
                <div class="page-submit">
                    <div>
                        <span class="entryExplanation">批量设置 </span><span>您可以选中员工前面的选择器来选择多个员工，批量修改它们的年假信息。</span>
                    </div>
                    <div style="margin: 20px">
                        <span>批量设置为：</span>
                        <input id="volumeSetTime" style="width: 50px;" />
                        <span>天</span>
                        <input id="volumeSetSubmit" style="margin-left: 50px;" type="button" value="确定" />
                    </div>
                </div>
                <!-- InstanceEndEditable -->
            </div>
            <div id="content-foot"><small>这个是内容下面的脚注</small></div>
        </div>        
        
        <div id="tipsw">
	        <!-- InstanceBeginEditable name="pageShortcut" -->
            <!-- InstanceEndEditable -->            
            
            <div id="tips" class="box">
           	
            </div>
        </div>
        <div class="clearfloat"></div>
    </div> 
</div>
	    <!-- InstanceBeginEditable name="pageFoot" -->
    <div id="tip_remind" style="display: none; min-height: 130px;">
        <h1>
            按部门过滤</h1>
        <div id="cmbDeptList">
            <a id="cmbEveryone" class="indent">所有员工</a><br />
        </div>
    </div>
    <!-- InstanceEndEditable -->    
</body>
<!-- InstanceEnd --></html>
